<template>
  <div class="mirrorDetails">
    <Navigation></Navigation>
    <!-- <div class="mirror_top">
      <div class="return" @click="arrowReturn">
        <svg-icon icon-class="leftArrow" class="arrow" />
        <span>返回</span>
      </div>
    </div> -->
    <div class="mirror-content" v-loading="loading">
      <div class="mirrorDesc">
        <!-- leftArrow -->
        <div class="name">
          <span> {{ mirrorInfo.mirrorName }} </span>
          <!-- <el-button type="primary" @click="creatInstance(mirrorInfo.imageId)">使用实例</el-button> -->
        </div>
        <div class="desc">
          {{ mirrorInfo.mirrorDescribe }}
        </div>
        <!-- <div class="tag">
          <el-tag
            type="warning"
            v-for="(item, index) in mirrorInfo.algorithm"
            :key="index"
            >{{ item }}</el-tag
          >
        </div> -->
        <div class="title">
          <div
            class="tags"
            v-for="(algo, index) in mirrorInfo.algorithm"
            :key="index"
            :style="{
              border: `1px solid ${mirrorInfo.tagsColor}`,
              color: `${mirrorInfo.tagsColor}`,
              backgroundColor: hexToRgb(mirrorInfo.tagsColor),
            }"
            style=""
          >
            {{ algo }}
          </div>
        </div>
        <div class="tag_use">
          <div class="new_btn">
            <el-button type="success" @click="creatInstance(mirrorInfo.imageId)"
              >创建应用</el-button
            >
          </div>

          <div class="like">
            <img
              class="good_like"
              src="@/static/images/like_active.png"
              alt=""
              v-if="this.isLike.length > 0"
              @click="deleteLike"
            />

            <img
              class="good_like"
              src="@/static/images/like.png"
              alt=""
              v-else
              @click="addLike"
            />
            <span style="margin-top: 4px; margin-left: 8px">
              {{ mirrorInfo.likeCount }}</span
            >
          </div>
          <div class="use">
            <img src="images/use.png" />
            <span style="margin-top: 4px; margin-left: 8px">{{
              mirrorInfo.usage
            }}</span>
          </div>

          <div class="upUser">
            {{ '上传：' + mirrorInfo.username }}
          </div>
        </div>
      </div>
      <div class="readme-content">
        <div class="title">
          <div
            class="readme-title title_active"
            id="readme-title"
            @click="changeIndex(1)"
          >
            <!-- <img src="../../../public/images/readme.png" alt="" /> -->
            <span style="font-size: 14px">模型创建</span>
          </div>
          <div
            class="content-use-title"
            id="content-use-title"
            @click="changeIndex(2)"
          >
            <span style="font-size: 14px">使用说明</span>
          </div>
          <div class="content-title" id="content-title" @click="changeIndex(3)">
            <span style="font-size: 14px">本地部署</span>
          </div>
          <!-- <div class="content-title" id="content-title" @click="changeIndex(3)">
            <span style="font-size: 14px"
              >评论区
            </span>
          </div> -->
        </div>
        <div class="mirror_main">
          <div class="mirror_main_left">
            <div class="readme" style="margin-bottom: 30px" v-if="index == 1">
              <!-- <vue-markdown :source="readme" @rendered="handleRendered" v-highlight>
            {{ readme }}
          </vue-markdown> -->
              <v-md-preview
                :text="readme"
                @copy-code-success="handleCopyCodeSuccess"
              ></v-md-preview>
            </div>
            <div v-else-if="index == 2">
              <v-md-preview
                :text="instructions"
                @copy-code-success="handleCopyCodeSuccess"
              ></v-md-preview>
            </div>
            <div v-else>
              <v-md-preview
                :text="localDeployment"
                @copy-code-success="handleCopyCodeSuccess"
              ></v-md-preview>
            </div>
            <!-- <div class="comment" v-else>
              <div class="comment-btn">
                <img
                  :src="basePicUrl + $store.getters.avatar"
                  v-if="$store.getters.avatar != ''"
                />
                <div
                  style="
                    width: 30px;
                    height: 30px;
                    background-color: #ccc;
                    border-radius: 15px;
                  "
                  v-else
                ></div>
                <el-input
                  placeholder="请输入评论"
                  v-model="commentInput"
                  style="margin-left: 10px"
                  clearable
                ></el-input>
                <el-button
                  type="primary"
                  @click="postNewComment"
                  style="
                    margin-left: 20px;
                    background: rgba(63, 181, 73, 1);
                    border: 1px solid rgba(63, 181, 73, 1);
                  "
                  >发送</el-button
                >
              </div>
              <div
                class="comment-item"
                v-for="item in commentList"
                :key="item.id"
                v-show="index == 3 && commentList.length && suanjiaToken"
              >
                <div class="comment-left">
                  <div class="avatar" v-if="item.user && item.user.avatar">
                    <img :src="basePicUrl + item.user.avatar" alt="" />
                  </div>
                  <div
                    style="
                      background-color: #ccc;
                      width: 30px;
                      height: 30px;
                      text-align: center;
                      line-height: 30px;
                      border-radius: 50%;
                    "
                    v-else
                  >
                    {{ item.user ? item.user.name[0] : "销" }}
                  </div>
                </div>
                <div class="comment-right">
                  <div class="username">
                    <span>
                      {{ item.user ? item.user.name : "用户已注销" }}</span
                    >
                  </div>
                  <div class="content">
                    <div class="word">
                      {{ item.content }}
                    </div>
                  </div>
                  <div class="answer">
                    <span>{{
                      `${$moment(item.createdAt).format("YYYY-MM-DD HH:mm:ss")}`
                    }}</span>
                    <span style="margin: 0 40px" @click="answer(item, '', 1)"
                      >回复</span
                    >
                    <span
                      v-if="$store.getters.userId == item.userId"
                      @click="deleteComment(item)"
                      >删除</span
                    >
                  </div>
                  <div
                    class="answerComment"
                    v-for="(ans, index) in item.children"
                    :key="index"
                  >
                    <div class="answerComment_left">
                      <div
                        class="avatar"
                        style="margin-top: 8px"
                        v-if="ans.userInfo.__data.avatar"
                      >
                        <img
                          :src="basePicUrl + ans.userInfo.__data.avatar"
                          alt=""
                        />
                      </div>
                      <div
                        style="
                          background-color: #ccc;
                          width: 30px;
                          height: 30px;
                          text-align: center;
                          line-height: 30px;
                          border-radius: 50%;
                        "
                        v-else
                      >
                        {{ ans.userInfo.__data.name[0] }}
                      </div>
                      <div class="anser_info">
                        <span
                          style="
                            display: inline-block;
                            width: 40px;
                            margin: 0 10px;
                            font-size: 12px;
                            color: rgba(0, 0, 0, 0.65);
                          "
                        >
                          {{ ans.userInfo.__data.name }}</span
                        >
                        <span
                          v-if="ans.type == 2"
                          style="
                            color: rgba(34, 34, 34, 1);
                            font-size: 12px;
                            display: inline-block;
                            width: 80px;
                          "
                          >回复
                          <span
                            style="
                              color: rgba(0, 0, 0, 0.65);
                              font-size: 12px;
                              margin-left: 10px;
                            "
                          >
                            {{ ` ${ans.replyUserInfo.__data.name}` }}</span
                          >
                        </span>
                      </div>
                      <div class="answer_content">
                        {{ ans.answer }}
                      </div>
                    </div>
                    <div class="answer">
                      <span>{{
                        `${$moment(ans.answerTime).format(
                          "YYYY-MM-DD HH:mm:ss"
                        )}`
                      }}</span>
                      <span style="margin: 0 20px" @click="answer(ans, item, 2)"
                        >回复</span
                      >
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="commentNone"
                v-show="index == 3 && commentList.length == 0 && suanjiaToken"
              >
                暂无评论
              </div>
              <div class="commentNone" v-show="index == 3 && !suanjiaToken">
                登录后可以查看评论
              </div>
            </div> -->
          </div>
          <div class="mirror_main_right">
            <div class="main_right_top">
              <span>热门镜像</span>
            </div>

            <div class="main_right_content">
              <div
                class="card_box"
                :id="'card_box' + index"
                v-for="(item, index) in hotMirrorList"
                :key="item.id"
              >
                <div @click="toMirrorDetails(item.id, item)">
                  <img class="circle" :src="image[index]" />
                  <div class="circle">
                    <div class="circle_number" :id="'circle_number' + index">
                      {{ index + 1 }}
                    </div>
                    <span class="circle_text" :id="'circle_text' + index">
                      {{ item.mirrorName }}
                    </span>
                  </div>

                  <div class="circle">
                    <div style="display: flex; align-items: center">
                      <img :src="imageDown[index]" />
                      <div
                        style="padding-left: 11px"
                        class="circle_color"
                        :id="'circle_color' + index"
                      >
                        {{ item.usage }}
                      </div>
                    </div>
                    <div
                      class="circle_color_two"
                      :id="'circle_color_two' + index"
                    >
                      {{ '上传：' + item.username }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer" style="width: 100%; height: 30px"></div>
    <!-- <el-dialog title="回复" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="answerContent" placeholder="请输入回复内容"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="postCommentChildren">确 定</el-button>
      </span>
    </el-dialog> -->
    <el-backtop :bottom="100" :right="80"> </el-backtop>
  </div>
</template>

<script>
import Navigation from '@/components/navigator.vue'
import VueMarkdown from 'vue-markdown'

export default {
  components: {
    Navigation,
    VueMarkdown,
  },
  head() {
    return {
      title: this.mirrorInfo.mirrorName,
    }
  },
  async asyncData(ctx) {
    // console.log('ctx :>> ', ctx)
    let index = ctx.route.query.index ? ctx.route.query.index : 1
    let communityMirrorId = ctx.route.query.id
    let hotMirrorList = await ctx.$generalGet('communityMirrors', {
      filter: { order: 'usage DESC', limit: 6 },
    })
    let isLike = await ctx.$generalGet('likes', {
      filter: {
        where: {
          userId: ctx.store.state.userId,
          communityMirrorId,
        },
      },
    })
    let mirrorInfo = await ctx.$generalGetOne(
      'communityMirrors',
      communityMirrorId
    )
    return {
      hotMirrorList,
      isLike,
      mirrorInfo,
      communityMirrorId,
      readme: mirrorInfo.mdData,
      localDeployment: mirrorInfo.localDeployment,
      instructions: mirrorInfo.instructions,
      index,
    }
  },
  created() {
    // console.log('this.$route :>> ', this.$route)
    // this.index = this.$route.query.index ? this.$route.query.index : 1
    // this.communityMirrorId = this.$route.query.id
    // // this.suanjiaToken = getSuanJiaToken()
    // this.getMirrorDetails()
    // this.getLikeStatus()
    // // this.getComment()
    // this.getHotMirror()
  },
  mounted() {
    if (this.index == 1) {
      document.getElementById('readme-title').className += ' title_active'
      document.getElementById('content-title').classList.remove('title_active')
      document
        .getElementById('content-use-title')
        .classList.remove('title_active')
    } else if (this.index == 2) {
      document.getElementById('content-use-title').className += ' title_active'

      document.getElementById('content-title').classList.remove('title_active')
      document.getElementById('readme-title').classList.remove('title_active')
    } else if (this.index == 3) {
      document.getElementById('content-title').className += ' title_active'
      document.getElementById('readme-title').classList.remove('title_active')
      document
        .getElementById('content-use-title')
        .classList.remove('title_active')
    }
    setTimeout(() => {
      for (let i = 0; i < 6; i++) {
        if (i == 0) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#FF5733'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#FFEEED'
          document.getElementById(`circle_text${i}`).style.color = '#FF5733'
          document.getElementById(`circle_color${i}`).style.color = '#FF5733'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#FF5733'
        } else if (i == 1) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#FF8D1A'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#FFF4EB'
          document.getElementById(`circle_text${i}`).style.color = '#FF8D1A'
          document.getElementById(`circle_color${i}`).style.color = '#FF8D1A'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#FF8D1A'
        } else if (i == 2) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#237E2A'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#F0FCF4'
          document.getElementById(`circle_text${i}`).style.color = '#237E2A'
          document.getElementById(`circle_color${i}`).style.color = '#237E2A'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#237E2A'
        } else if (i == 3) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#9D7DEB'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#F3EDFF'
          document.getElementById(`circle_text${i}`).style.color = '#9D7DEB'
          document.getElementById(`circle_color${i}`).style.color = '#9D7DEB'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#9D7DEB'
        } else if (i == 4) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#0776F9'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#EBF0FF'
          document.getElementById(`circle_text${i}`).style.color = '#0776F9'
          document.getElementById(`circle_color${i}`).style.color = '#0776F9'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#0776F9'
        } else if (i == 5) {
          document.getElementById(`circle_number${i}`).style.backgroundColor =
            '#CD7CEB'
          document.getElementById(`card_box${i}`).style.backgroundColor =
            '#FDEBFF'
          document.getElementById(`circle_text${i}`).style.color = '#CD7CEB'
          document.getElementById(`circle_color${i}`).style.color = '#CD7CEB'
          document.getElementById(`circle_color_two${i}`).style.color =
            '#CD7CEB'
        }
      }
    }, 400)
  },
  data() {
    return {
      loading: false,
      mirrorInfo: {},
      readme: '',
      localDeployment: '',
      instructions: '',
      communityMirrorId: '',
      isLike: [],
      index: 1,
      // 评论
      // commentInput: '',
      // commentList: [],
      // dialogVisible: false,
      // answerContent: '',
      // currentCommentId: '',
      // type: null,
      // row: null,
      suanjiaToken: null,
      hotMirrorList: [],
      image: [
        'images/red.png',
        'images/orange.png',
        'images/green.png',
        'images/purple.png',
        'images/blue.png',
        'images/pink.png',
      ],
      imageDown: [
        'images/redDown.png',
        'images/orangeDown.png',
        'images/greenDown.png',
        'images/purpleDown.png',
        'images/blueDown.png',
        'images/pinkDown.png',
      ],
    }
  },
  methods: {
    handleCopyCodeSuccess(code) {
      this.$message.success('代码复制成功')
    },
    hexToRgb(hex) {
      // 移除十六进制颜色代码中的'#'
      if (hex) {
        let sanitizedHex = hex.replace('#', '')
        // 解析红、绿、蓝值
        let r = parseInt(sanitizedHex.substring(0, 2), 16)
        let g = parseInt(sanitizedHex.substring(2, 4), 16)
        let b = parseInt(sanitizedHex.substring(4, 6), 16)

        return `rgba(${r}, ${g}, ${b},0.1)`
      } else {
        return `rgba(94,94,94,0.1)`
      }
    },
    async getHotMirror() {
      let res = await this.$generalGet('communityMirrors', {
        filter: { order: 'usage DESC', limit: 6 },
      })
      this.hotMirrorList = res
    },
    toMirrorDetails(row, item) {
      // this.$router.push({ path: "/mirrorDetails", query: { id: row } });
      const { href } = this.$router.resolve({
        path: '/mirrorDetails',
        query: {
          id: row,
        },
      })
      window.open(href, '_blank')
      // location.reload();
    },
    // async deleteComment(item) {
    //   let res = await generalDelete('comments', item.id)
    //   if (res.count) {
    //     this.$message.success('删除评论成功')
    //     this.getComment()
    //   }
    // },
    // async postCommentChildren() {
    //   let data = {
    //     userId: this.$store.getters.userId,
    //     replyUserId: this.row.userId,
    //     id: this.currentCommentId,
    //     answer: this.answerContent,
    //     type: this.type,
    //   }
    //   let res = await generalPost('comments/answerComment', { comObj: data })
    //   this.$message.success('回复成功')
    //   // this.getComment()
    //   this.answerContent = ''
    //   this.dialogVisible = false
    // },
    // answer(row, item, type) {
    //   if (type == 1) {
    //     this.row = row
    //     this.currentCommentId = row.id
    //   } else {
    //     this.row = row
    //     this.currentCommentId = item.id
    //   }
    //   this.type = type
    //   this.dialogVisible = true
    // },
    // arrowReturn() {
    //   //返回
    //   this.$router.push({ path: '/mirror', query: {} })

    //   // this.$router.back();
    // },
    // async getComment() {
    //   let res = await this.$generalGet('comments', {
    //     filter: {
    //       where: {
    //         communityMirrorId: this.communityMirrorId,
    //       },
    //       include: ['user'],
    //       order: 'createdAt DESC',
    //     },
    //   })
    //   this.commentList = res
    // },
    // async postNewComment() {
    //   if (this.suanjiaToken) {
    //     if (this.commentInput != '') {
    //       let res = await this.$generalGet('comments', {
    //         userId: this.$store.getters.userId,
    //         communityMirrorId: this.communityMirrorId,
    //         content: this.commentInput,
    //       })
    //       this.$message.success('评论发布成功')
    //       this.getComment()
    //       this.commentInput = ''
    //     } else {
    //       this.$message.error('评论不能为空')
    //     }
    //   } else {
    //     this.$message.error('登录后才能评论')
    //   }
    // },
    changeIndex(index) {
      this.index = index
      if (index == 1) {
        document.getElementById('readme-title').className += ' title_active'
        document
          .getElementById('content-title')
          .classList.remove('title_active')
        document
          .getElementById('content-use-title')
          .classList.remove('title_active')
      } else if (index == 2) {
        document.getElementById('content-use-title').className +=
          ' title_active'

        document
          .getElementById('content-title')
          .classList.remove('title_active')
        document.getElementById('readme-title').classList.remove('title_active')
      } else {
        document.getElementById('content-title').className += ' title_active'
        document.getElementById('readme-title').classList.remove('title_active')
        document
          .getElementById('content-use-title')
          .classList.remove('title_active')
      }
    },
    async deleteLike() {
      this.loading = true
      let res = await this.$generalDelete('likes', this.isLike[0].id)
      let reduce = await this.$generalGet('likes/reduceLike', {
        id: this.communityMirrorId,
      })
      if (res.count && reduce.code == 200) {
        this.$message.success('取消点赞成功')
        this.getMirrorDetails()
        this.getLikeStatus()
        setTimeout(() => {
          this.loading = false
        }, 200)
      }
    },
    async addLike() {
      this.loading = true
      if (this.suanjiaToken) {
        let res = await generalPost('likes', {
          userId: this.$store.getters.userId,
          communityMirrorId: this.communityMirrorId,
        })
        let add = await this.$generalGet('likes/addLike', {
          id: this.communityMirrorId,
        })
        if (res && add.code == 200) {
          this.$message.success('点赞成功')
          this.getMirrorDetails()
          this.getLikeStatus()
        }
        setTimeout(() => {
          this.loading = false
        }, 200)
      } else {
        this.loading = false
        this.$message.error('请先登录再点赞')
      }
    },
    getLikeStatus() {
      this.$generalGet('likes', {
        filter: {
          where: {
            userId: this.$store.getters.userId,
            communityMirrorId: this.communityMirrorId,
          },
        },
      })
        .then((result) => {
          this.isLike = result
        })
        .catch((err) => {
          console.log('err :>> ', err)
        })
    },
    creatInstance(imageId) {
      // const routeUrl = this.$router.resolve({
      //   path: `/instanceCreate?mirrorId=${imageId}`,
      // })
      // this.$openPage(routeUrl.href)
      const { href } = this.$router.resolve({
        path: `/instanceCreate?mirrorId=${imageId}`,
      })
      window.open(href, '_blank')
    },
    async getMirrorDetails() {
      let res = await this.$generalGetOne(
        'communityMirrors',
        this.communityMirrorId
      )
      this.mirrorInfo = res
      this.readme = res.mdData
      this.localDeployment = res.localDeployment
      this.instructions = res.instructions
    },
  },
}
</script>

<style scoped lang="scss">
.mirrorDetails .title_active {
  height: 25px;
  border-bottom: 2px solid #3fb549;
  border-radius: 2px;
  color: #3fb549 !important;
}

.mirrorDetails {
  width: 100%;
  background: rgba(247, 250, 248, 1);

  // .mirror_top {
  //   width: 95%;
  //   margin: 0 24px;
  //   height: fit-content;
  //   margin-top: 60px;

  //   .return {
  //     padding-top: 30px;
  //     width: 80px;
  //     // border: 1px solid #f00;
  //     color: rgba(34, 34, 34, 1);
  //     font-size: 16px;
  //     margin-bottom: 20px;
  //     cursor: pointer;

  //     .arrow {
  //       fill: rgba(34, 34, 34, 1);
  //       margin-right: 4px;
  //     }
  //   }

  //   .return:hover {
  //     color: rgba(63, 181, 73, 1);

  //     .arrow {
  //       fill: rgba(63, 181, 73, 1);
  //     }
  //   }
  // }

  .mirror-content {
    width: 98%;
    margin: 0 24px;
    height: fit-content;
    margin-top: 60px;
    padding-top: 30px;
    .mirrorDesc {
      padding: 25px;
      display: flex;
      flex-direction: column;
      height: fit-content;
      // justify-content: space-between;
      background-color: #fff;

      .name {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 400;
        // left: 49px;
        // font-weight: 400;
        color: rgba(34, 34, 34, 1);

        .el-button {
          width: 74px;
          height: 32px;
          padding-left: 8px;
          padding-top: 8px;
          font-size: 14px;
          border-radius: 2px;
        }
      }

      .desc {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        font-weight: 400;
        margin-top: 16px;
      }
      .title {
        display: flex;
        align-items: center;
        margin: 5px 0;

        .tags {
          width: fit-content;
          height: 22px;
          font-size: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          // min-width: 70px;
          padding: 0 7px;
          border-radius: 2px;
          line-height: 28px;
          margin-top: 26px;
          margin-right: 10px;
        }
      }
      .tag {
        display: flex;
        margin-top: 26px;
        align-items: center;

        .avatar {
          display: block;
          width: 24px;
          height: 24px;
          background-color: #deedff;
          color: #0776f9;
          border-radius: 15px;
          font-weight: 700;
          font-size: 14px;
          text-align: center;
          line-height: 24px;
        }

        .el-tag:nth-child(n + 2) {
          margin-left: 10px;
        }

        ::v-deep .el-tag--warning {
          background-color: #fff5eb;
          border-color: #ff8d1a;
          color: #ff8d1a;
        }

        ::v-deep .el-tag--success {
          background-color: #f2fff6;
          border-color: #36cc61;
          color: #36cc61;
        }
      }

      .tag_use {
        display: flex;
        align-items: center;
        font-size: 12px;
        margin-top: 26px;
        color: rgba(0, 0, 0, 0.65);

        .new_btn {
          ::v-deep .el-button--success {
            width: 274px;
            height: 40px;
            border-radius: 2px;
            border: 1px solid rgba(63, 181, 73, 1);
            background-color: rgba(63, 181, 73, 1);
          }
        }

        .use {
          display: flex;
          align-items: center;
          margin-left: 40px;

          img {
            width: 14px;
            height: 14px;
          }
        }

        .like {
          margin-left: 44px;
          display: flex;
          align-items: center;

          .good_like {
            cursor: pointer;
            width: 15px;
            height: 15px;
          }

          // img {
          //   margin-left: 1px;
          //   cursor: pointer;
          //   width: 15px;
          //   height: 15px;
          // }
        }

        .upUser {
          margin-left: 40px;
          color: rgba(0, 0, 0, 1);
        }
      }
    }

    .readme-content {
      width: 100%;
      margin-top: 35px;

      .mirror_main {
        width: 100%;
        display: flex;
        justify-content: space-between;

        .mirror_main_left {
          width: 80%;
          background-color: white;
        }

        .mirror_main_right {
          height: 710px;
          width: 16%;
          border-radius: 2px;
          background: rgba(255, 255, 255, 1);
          padding: 12px 24px;

          .main_right_top {
            font-size: 18px;
            font-weight: 400;
            color: rgba(48, 49, 51, 1);
          }

          .main_right_content {
            .card_box {
              position: relative;
              // background-color: rgba(255, 238, 237, 1);
              width: 100%;
              height: 89px;
              border-radius: 2px;
              margin-top: 18px;
              cursor: pointer;
              overflow: hidden;
            }

            .circle img {
              width: 14px;
              height: 14px;
            }

            .circle {
              position: absolute;
              width: 100%;
              height: 100%;
              .circle_text {
                margin-left: 11px;
                // color: rgba(255, 87, 51, 1);
                width: 50%;
                height: 23px;
                overflow: hidden; // 超出的文本隐藏
                text-overflow: ellipsis; // 溢出用省略号显示
                white-space: nowrap; // 溢出不换行
                margin-top: -2px;
              }

              .circle_number {
                width: 20px;
                height: 20px;
                border-radius: 2px;
                background: rgba(255, 87, 51, 1);
                text-align: center;
                color: #fff;
                vertical-align: top;
                padding-top: 2px;
                line-height: 15px;
              }

              .circle_color {
                color: #ff583300;
                font-size: 12px;
                padding-top: 4px;
              }

              .circle_color_two {
                color: #ff583300;
                font-size: 12px;
                padding-top: 4px;
              }
            }

            .circle:first-child {
              height: 92%;
            }

            .circle:nth-child(2) {
              left: 7%;
              top: 16px;
              display: flex;
            }

            .circle:nth-child(3) {
              left: 7%;
              top: 59px;
              display: flex;
              // color: rgba(255, 87, 51, 1);
              width: 60px;
              height: 18px;
              width: 85%;
              justify-content: space-between;
            }
          }
        }
      }

      .title {
        width: fit-content;
        height: 25px;
        display: flex;
        align-items: center;
        margin-bottom: 11px;

        .readme-title {
          width: fit-content;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba($color: #000000, $alpha: 0.65);

          cursor: pointer;

          span {
            font-weight: 400;
          }
        }

        .content-title {
          width: fit-content;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-left: 32px;
          color: rgba($color: #000000, $alpha: 0.65);

          span {
            font-weight: 400;
          }
        }

        .content-use-title {
          width: fit-content;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-left: 32px;
          color: rgba($color: #000000, $alpha: 0.65);

          span {
            font-weight: 400;
          }
        }
      }

      .readme {
        width: 100%;
        // min-width: 800px;
        height: fit-content;
        // border: 1px solid #ccc;
        border-radius: 4px;

        ::v-deep div {
          p {
            img {
              width: 100%;
            }
          }
        }
      }

      .comment {
        width: 100%;
        height: fit-content;
        border-radius: 2px;
        // border: 1px solid #e5e5e5;
        padding: 25px;

        .comment-btn {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          img {
            width: 44px;
            height: 44px;
          }

          .el-input {
            width: 1037px;
          }

          ::v-deep .el-input--medium .el-input__inner {
            height: 40px;
            font-size: 16px;
            border-radius: 2px;
          }

          ::v-deep .el-input__inner::placeholder {
            color: rgba($color: #000000, $alpha: 0.65);
            font-size: 16px;
          }

          .el-button {
            width: 80px;
            height: 40px;
            border-radius: 2px;
          }
        }

        // border: 1px solid #ccc;
        .comment-item {
          position: relative;
          display: flex;
          height: fit-content;
          padding: 25px 0; // border-bottom: 1px solid #ccc;

          // &:hover {
          //   background-color: #f8fafe;
          // }
          &::after {
            content: ''; // 必须
            position: absolute;
            left: 17px;
            bottom: 0;
            right: 0;
            width: 96%;
            height: 1px;
            background-color: #dcdcdc;
            margin-left: 33px;
          }

          .comment-left {
            width: 44px;
            height: 44px;
            background-color: #ccc;
            border-radius: 22px;
            text-align: center;
            line-height: 44px;

            img {
              width: 44px;
              height: 44px;
            }
          }

          .comment-right {
            margin-left: 8px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .username {
              color: rgba($color: #000000, $alpha: 0.65);
              font-size: 12px;
            }

            .content {
              margin-top: 12px;
              font-size: 14px;
              letter-spacing: 2px;
              color: rgba($color: #222, $alpha: 1);
            }

            .answer {
              margin-top: 12px;
              color: rgba($color: #000000, $alpha: 0.4);
              cursor: pointer;
              font-size: 12px;

              span {
                &:first-child {
                  font-size: 12px;
                  cursor: auto;
                }
              }
            }

            .answerComment {
              margin-top: 24px;

              .answerComment_left {
                display: flex;
                align-items: center;
                height: fit-content;

                .avatar {
                  border-radius: 12px;
                  // background-color: #ccc;
                  text-align: center;
                  line-height: 24px;

                  img {
                    width: 24px;
                    height: 24px;
                  }
                }

                .anser_info {
                  display: flex;
                }

                .answer_content {
                  margin-top: -2px;
                  margin-left: 15px;
                  font-size: 14px;
                  color: rgba($color: #222, $alpha: 1);
                  letter-spacing: 2px;
                }
              }

              .answer {
                margin-left: 36px;
              }
            }
          }
        }
      }

      .commentNone {
        width: 100%;
        height: 100px;
        border: 1px solid #ccc;
        border-radius: 5px;
        text-align: center;
        line-height: 100px;
        margin-top: 30px;
      }
    }
  }
  ::v-deep .el-icon-caret-top::before {
    color: #36cc61;
  }
}
@media screen and (max-width: 720px) {
  .mirror-content {
    min-width: 700px;
  }
}

@media screen and (max-width: 1200px) {
  .mirror_main_left {
    width: 100% !important;
  }

  .mirror_main_right {
    display: none !important;
  }
}
</style>
